<!--
<pro-header *ngIf="!tabShow" style="position:relative">
</pro-header>

<pro-header *ngIf="tabShow"  id="pro" style="position:relative">
    <ng-template #tab >
        <span><i class="anticon anticon-pushpin-o"></i>&nbsp;{{roleName}}</span>
        <nz-tabset  style="position:relative;left: 45%;" [nzSize]="'default'"   [nzSelectedIndex]="selectIndex" (nzSelectChange)="getRouter($event)">
            <nz-tab  *ngFor="let tab of tabs;let idx = index" >
                <ng-template #nzTabHeading>
                    {{tab.name}}
                </ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>
</pro-header>
<style>
    .ant-card {
        position: static;!important;
    }
    .ant-col-1, .ant-col-xs-1, .ant-col-sm-1, .ant-col-md-1, .ant-col-lg-1, .ant-col-2, .ant-col-xs-2, .ant-col-sm-2, .ant-col-md-2, .ant-col-lg-2, .ant-col-3, .ant-col-xs-3, .ant-col-sm-3, .ant-col-md-3, .ant-col-lg-3, .ant-col-4, .ant-col-xs-4, .ant-col-sm-4, .ant-col-md-4, .ant-col-lg-4, .ant-col-5, .ant-col-xs-5, .ant-col-sm-5, .ant-col-md-5, .ant-col-lg-5, .ant-col-6, .ant-col-xs-6, .ant-col-sm-6, .ant-col-md-6, .ant-col-lg-6, .ant-col-7, .ant-col-xs-7, .ant-col-sm-7, .ant-col-md-7, .ant-col-lg-7, .ant-col-8, .ant-col-xs-8, .ant-col-sm-8, .ant-col-md-8, .ant-col-lg-8, .ant-col-9, .ant-col-xs-9, .ant-col-sm-9, .ant-col-md-9, .ant-col-lg-9, .ant-col-10, .ant-col-xs-10, .ant-col-sm-10, .ant-col-md-10, .ant-col-lg-10, .ant-col-11, .ant-col-xs-11, .ant-col-sm-11, .ant-col-md-11, .ant-col-lg-11, .ant-col-12, .ant-col-xs-12, .ant-col-sm-12, .ant-col-md-12, .ant-col-lg-12, .ant-col-13, .ant-col-xs-13, .ant-col-sm-13, .ant-col-md-13, .ant-col-lg-13, .ant-col-14, .ant-col-xs-14, .ant-col-sm-14, .ant-col-md-14, .ant-col-lg-14, .ant-col-15, .ant-col-xs-15, .ant-col-sm-15, .ant-col-md-15, .ant-col-lg-15, .ant-col-16, .ant-col-xs-16, .ant-col-sm-16, .ant-col-md-16, .ant-col-lg-16, .ant-col-17, .ant-col-xs-17, .ant-col-sm-17, .ant-col-md-17, .ant-col-lg-17, .ant-col-18, .ant-col-xs-18, .ant-col-sm-18, .ant-col-md-18, .ant-col-lg-18, .ant-col-19, .ant-col-xs-19, .ant-col-sm-19, .ant-col-md-19, .ant-col-lg-19, .ant-col-20, .ant-col-xs-20, .ant-col-sm-20, .ant-col-md-20, .ant-col-lg-20, .ant-col-21, .ant-col-xs-21, .ant-col-sm-21, .ant-col-md-21, .ant-col-lg-21, .ant-col-22, .ant-col-xs-22, .ant-col-sm-22, .ant-col-md-22, .ant-col-lg-22, .ant-col-23, .ant-col-xs-23, .ant-col-sm-23, .ant-col-md-23, .ant-col-lg-23, .ant-col-24, .ant-col-xs-24, .ant-col-sm-24, .ant-col-md-24, .ant-col-lg-24 {
        position: static;!important;
    }
</style>
<div nz-row  [nzType]="'flex'" [nzGutter]="24">
    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        <nz-card   [nzBordered]="false"  style="overflow-x: auto">
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                    <span style="margin-left:5px" *ngIf='isShow'>角色管理</span>
                </div>
            </ng-template>
            <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent" >
                    <div *ngIf='!isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <div style = "text-align: center">
                            <i (click)="toggleCollapsed()" class="anticon anticon-menu-fold" ></i>
                            <div style="height:300px;"></div>
                        </div>
                    </div>

                </div>
                <div *ngIf='isShow' class="divDisplay">
                    <app-tree [initDate] = "treedata"
                              [selectionType]='selectionType'
                              (develop)="Unfold($event)"
                              [title] = "searchTitle"
                              [searchTitle] = "roleTitle"
                              [itemsData]="treemenus"
                              (Select)="TreeSelect($event)"
                              (MenuSelect)="RightSelect($event)"
                              (clickFunc)="clickFunc($event)"
                              (dropEvent)="dropEvent($event)"
                              (serchValue)="searchVal($event)">
                    </app-tree>
                </div>
                &lt;!&ndash;</div>&ndash;&gt;
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card *ngIf="tabShow">
            <router-outlet></router-outlet>
        </nz-card>
    </div>
</div>

<nz-modal [nzVisible]="roleGroupVisible"  [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="modelTitle"  [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="roleGroupVisible=false" [nzFooter]="modalFooter">
    <ng-template #modalContent>
        <form novalidate *ngIf="!ifshow"  (ngSubmit)="save()"  #f="ngForm" >
            &lt;!&ndash; 新增角色&ndash;&gt;
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24" *ngIf="saveType ==='addRole' || saveType ==='editRole'">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">角色名称</label><span [ngClass]="{'fromErrors':roleName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.roleName" name="roleName" #roleName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'角色名称'" nzId="roleName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="roleName.errors?.required && roleName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色名称
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>角色代码</label><span [ngClass]="{'fromErrors':roleCode.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.roleCode" required name="roleCode" #roleCode="ngModel"
                                      (nzBlur)="roleCodeexit(roleAdd.roleCode)"
                                      [nzSize]="'large'" [nzPlaceHolder]="'角色代码'" nzId="roleCode"
                            ></nz-input>
                            <nz-alert *ngIf='isSlash' nzBanner nzMessage="已存在相同的角色代码，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="roleCode.errors?.required && roleCode.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色代码
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否启用</label><span [ngClass]="{'fromErrors':f.controls.enabled?.errors}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="roleAdd.enabled" nzAllowClear required name="enabled" [nzSize]="'large'" [nzPlaceHolder]="'是否启用'" nzId="enAbled">
                                <nz-option  *ngFor="let i of enAbled; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="f.controls.enabled?.errors && f.controls.enabled.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择是否启用
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>角色分组</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.roleGroup" name="roleGroup" #roleGroup="ngModel" disabled  required [nzSize]="'large'" [nzPlaceHolder]="'默认角色分组'" nzId="roleGroup"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24" *ngIf="saveType ==='addroleGroup' || saveType === 'editroleGroup' ">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">角色组名称</label><span [ngClass]="{'fromErrors':roleName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.itemName" name="itemName" #roleName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'角色组名称'" nzId="itemName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="roleName.errors?.required && roleName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色组名称
                    </div>
                </div>
                &lt;!&ndash;<div nz-col [nzSpan]="24" class="mb-md" *ngIf="modelTitle === '新增角色组'">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">字典项</label><span [ngClass]="{'fromErrors':itemValue.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.itemValue" name="itemValue" #itemValue="ngModel" (nzBlur)="empCodeexit(roleAdd.itemValue)"  required [nzSize]="'large'" [nzPlaceHolder]="'字典项'" nzId="itemValue"></nz-input>
                            <nz-alert *ngIf='isSlash' nzBanner nzMessage="已存在相同的字典项，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="itemValue.errors?.required && itemValue.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入字典项
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="modelTitle === '新增角色组'">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">实际值</label><span [ngClass]="{'fromErrors':sendValue.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.sendValue" name="sendValue" #sendValue="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'实际值'" nzId="sendValue"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="sendValue.errors?.required && sendValue.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色组名称
                    </div>
                </div>&ndash;&gt;
                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="saveType ==='addroleGroup' || saveType === 'editroleGroup' ">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>角色组描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.itemDesc" nzAutosize=true nzType="textarea" name="itemDesc" [nzSize]="'large'" [nzPlaceHolder]="'角色组描述'"
                                      nzId="itemDesc"></nz-input>
                        </div>
                    </div>
                </div>

            </div>

            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="roleGroupVisible=false">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>

    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>

-->


<!--重写方法-->
<pro-header *ngIf="!tabShow" style="position:relative">
</pro-header>

<pro-header *ngIf="tabShow"  id="pro" style="position:relative">
    <ng-template #tab >
        <span><i class="anticon anticon-pushpin-o"></i>&nbsp;{{roleName}}</span>
        <nz-tabset  style="position:relative;left: 45%;" [nzSize]="'default'"   [nzSelectedIndex]="selectIndex" (nzSelectChange)="getRouter($event)">
            <nz-tab  *ngFor="let tab of tabs;let idx = index" >
                <ng-template #nzTabHeading>
                    {{tab.name}}
                </ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>
</pro-header>
<style>
    .ant-card {
        position: static;!important;
    }
    .ant-col-1, .ant-col-xs-1, .ant-col-sm-1, .ant-col-md-1, .ant-col-lg-1, .ant-col-2, .ant-col-xs-2, .ant-col-sm-2, .ant-col-md-2, .ant-col-lg-2, .ant-col-3, .ant-col-xs-3, .ant-col-sm-3, .ant-col-md-3, .ant-col-lg-3, .ant-col-4, .ant-col-xs-4, .ant-col-sm-4, .ant-col-md-4, .ant-col-lg-4, .ant-col-5, .ant-col-xs-5, .ant-col-sm-5, .ant-col-md-5, .ant-col-lg-5, .ant-col-6, .ant-col-xs-6, .ant-col-sm-6, .ant-col-md-6, .ant-col-lg-6, .ant-col-7, .ant-col-xs-7, .ant-col-sm-7, .ant-col-md-7, .ant-col-lg-7, .ant-col-8, .ant-col-xs-8, .ant-col-sm-8, .ant-col-md-8, .ant-col-lg-8, .ant-col-9, .ant-col-xs-9, .ant-col-sm-9, .ant-col-md-9, .ant-col-lg-9, .ant-col-10, .ant-col-xs-10, .ant-col-sm-10, .ant-col-md-10, .ant-col-lg-10, .ant-col-11, .ant-col-xs-11, .ant-col-sm-11, .ant-col-md-11, .ant-col-lg-11, .ant-col-12, .ant-col-xs-12, .ant-col-sm-12, .ant-col-md-12, .ant-col-lg-12, .ant-col-13, .ant-col-xs-13, .ant-col-sm-13, .ant-col-md-13, .ant-col-lg-13, .ant-col-14, .ant-col-xs-14, .ant-col-sm-14, .ant-col-md-14, .ant-col-lg-14, .ant-col-15, .ant-col-xs-15, .ant-col-sm-15, .ant-col-md-15, .ant-col-lg-15, .ant-col-16, .ant-col-xs-16, .ant-col-sm-16, .ant-col-md-16, .ant-col-lg-16, .ant-col-17, .ant-col-xs-17, .ant-col-sm-17, .ant-col-md-17, .ant-col-lg-17, .ant-col-18, .ant-col-xs-18, .ant-col-sm-18, .ant-col-md-18, .ant-col-lg-18, .ant-col-19, .ant-col-xs-19, .ant-col-sm-19, .ant-col-md-19, .ant-col-lg-19, .ant-col-20, .ant-col-xs-20, .ant-col-sm-20, .ant-col-md-20, .ant-col-lg-20, .ant-col-21, .ant-col-xs-21, .ant-col-sm-21, .ant-col-md-21, .ant-col-lg-21, .ant-col-22, .ant-col-xs-22, .ant-col-sm-22, .ant-col-md-22, .ant-col-lg-22, .ant-col-23, .ant-col-xs-23, .ant-col-sm-23, .ant-col-md-23, .ant-col-lg-23, .ant-col-24, .ant-col-xs-24, .ant-col-sm-24, .ant-col-md-24, .ant-col-lg-24 {
        position: static;!important;
    }

    .checkboxId {
        margin-left: 8px;
    }
</style>
<div nz-row  [nzType]="'flex'" [nzGutter]="24">
    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        <nz-card   [nzBordered]="false"  style="overflow-x: auto">
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                    <span style="margin-left:5px" *ngIf='isShow'>角色管理</span>
                </div>
            </ng-template>
            <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent" >
                    <div *ngIf='!isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <div style = "text-align: center">
                            <i (click)="toggleCollapsed()" class="anticon anticon-menu-fold" ></i>
                            <div style="height:300px;"></div>
                        </div>
                    </div>

                </div>
                <div *ngIf='isShow' class="divDisplay">
                    <app-tree [initDate] = "treedata"
                              [selectionType]='selectionType'
                              (develop)="Unfold($event)"
                              [title] = "searchTitle"
                              [searchTitle] = "roleTitle"
                              [itemsData]="treemenus"
                              (Select)="TreeSelect($event)"
                              (MenuSelect)="RightSelect($event)"
                              (clickFunc)="clickFunc($event)"
                              (dropEvent)="dropEvent($event)"
                              (serchValue)="searchVal($event)">
                    </app-tree>
                </div>
                <!--</div>-->
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card *ngIf="tabShow">
            <div *ngIf="tabId === 'rolemember'">
                <div *ngIf="isrootChild">
                    <div>
                        <form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
                            <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                                <div nz-col [nzSpan]="8" class="mb-md">
                                    <div nz-form-item class="d-flex">
                                        <div nz-form-label><label for="name">操作员姓名</label></div>
                                        <div nz-form-control class="flex-1">
                                            <nz-input [(ngModel)]="operators.operatorName" name="operatorName" [nzSize]="'large'" [nzPlaceHolder]="'操作员姓名'" nzId="operatorName"></nz-input>
                                        </div>
                                    </div>
                                </div>
                                <div nz-col [nzSpan]="8" class="mb-md">
                                    <div nz-form-item class="d-flex">
                                        <div nz-form-label><label for="name">登陆用户名</label></div>
                                        <div nz-form-control class="flex-1">
                                            <nz-input [(ngModel)]="operators.userId" name="userId" [nzSize]="'large'" [nzPlaceHolder]="'登陆用户名'" nzId="userId"></nz-input>
                                        </div>
                                    </div>
                                </div>
                                <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                                    <div nz-form-item class="d-flex">
                                        <div nz-form-label><label for="status">操作员状态</label></div>
                                        <div nz-form-control class="flex-1">
                                            <nz-select style="width:100%" [(ngModel)]="operators.operatorStatus" nzAllowClear name="status" name="operatorStatus" [nzSize]="'large'" [nzPlaceHolder]="'操作员状态'" nzId="operatorStatus">
                                                <nz-option  *ngFor="let i of operType; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                            </nz-select>
                                        </div>
                                    </div>
                                </div>
                                <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                                    <div nz-form-item class="d-flex">
                                        <div nz-form-label><label for="status">员工状态</label></div>
                                        <div nz-form-control class="flex-1">
                                            <nz-select style="width:100%" [(ngModel)]="operators.empStatus" nzAllowClear name="status" name="empStatus" [nzSize]="'large'" [nzPlaceHolder]="'员工状态'" nzId="empStatus">
                                                <nz-option  *ngFor="let i of roleType; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                            </nz-select>
                                        </div>
                                    </div>
                                </div>
                                <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                                    <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                                    <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
                                    <a (click)="expandForm=!expandForm">
                                        {{expandForm ? '收起' : '展开'}}
                                        <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                                    </a>
                                </div>
                            </div>
                        </form>
                        <!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
                        <app-list (addCreat)="addHandler($event)"
                                  [selectedRows]="selectedRows"
                                  (buttonData)="buttonDataHandler($event)"
                                  (pageNumber)="monitorHandler($event)"
                                  (deleatData)="deleatData($event)"
                                  (isActive)="isActive($event)"
                                  (selectedRow)="selectedRow($event)"
                                  (buttonEvent)="buttonEvent($event)"
                                  (deleteBatch)="deleteBatch($event)"
                                  [initDate] = "data"
                                  [buttons]="buttons"
                                  [headerDate] = "headerData"
                                  [moreData] = "moreData"
                                  [loading]="loading"
                                  [configTitle]="configTitle"
                                  [total]="total">

                        </app-list>

                        <!--引入列表组件-->
                    </div>
                    <nz-modal [nzVisible]="roleAddModal" [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="assignRole" [nzConfirmLoading]="loading" [nzContent]="roleContent"
                              (nzOnCancel)="roleAddModal=false" (nzOnOk)="subAddrole()">
                        <ng-template #roleContent>
                            <div nz-row [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                                <div nz-col [nzSpan]="6" [nzPush]="1" class="mb-md">
                                    <div nz-form-item class="d-flex">
                                        <div nz-form-control class="flex-1">
                                            <nz-radio-group [(ngModel)]="selectType"  (ngModelChange)="selectChange(selectType)">
                                                <label nz-radio [nzValue]="'empName'">
                                                    <span>按姓名</span>
                                                </label>
                                                <label nz-radio [nzValue]="'org'">
                                                    <span>按机构</span>
                                                </label>
                                            </nz-radio-group>
                                        </div>
                                    </div>
                                </div>
                                <div nz-col [nzSpan]="8"  *ngIf="selectType === 'org'"  class="mb-md">
                                    <div nz-form-item class="d-flex">
                                        <div nz-form-control class="flex-1">
                                            <nz-select style="width:100%" [(ngModel)]="orgCode" nzAllowClear (ngModelChange)="selectorgorgChange(orgCode)"  name="orgCode" [nzSize]="'large'" [nzPlaceHolder]="'选择组织机构'" nzId="orgCode">
                                                <nz-option  *ngFor="let i of orgList; let idx = index" [nzLabel]="i.orgName" [nzValue]="i.guid"></nz-option>
                                            </nz-select>
                                        </div>
                                    </div>
                                </div>
                                <div nz-col [nzSpan]="8"  *ngIf="selectType === 'org' && orgCode !== ''"  class="mb-md">
                                    <div nz-form-item class="d-flex">
                                        <div nz-form-control class="flex-1">
                                            <nz-select style="width:100%" [(ngModel)]="orgCodeChild" nzAllowClear (ngModelChange)="selectorgChange(orgCodeChild)"  name="orgCode" [nzSize]="'large'" [nzPlaceHolder]="'选择子机构'" nzId="orgCode">
                                                <nz-option  *ngFor="let i of orgChildList; let idx = index" [nzLabel]="i.orgName" [nzValue]="i.guid"></nz-option>
                                            </nz-select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <nz-transfer
                                [nzDataSource]="list"
                                nzShowSearch
                                [nzTitles]="['可选成员', '已选成员']"
                                [nzListStyle]="{'width.%': 44, 'height.px': 500}"
                                [nzFilterOption]="filterOption"
                                (nzSearchChange)="searchpro($event)"
                                (nzSelectChange)="select($event)"
                                (nzChange)="change($event)"
                            >
                                <ng-template #render let-item>
                                    {{item.description}}({{item.userId}})
                                </ng-template>

                            </nz-transfer>
                        </ng-template>
                    </nz-modal>

                 <!--   <div  *ngIf="isNull == false">
                        <div nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">

                            <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
                                <h3 style="font-weight:bold;margin-bottom: 15px;">还没有任何角色成员</h3>
                                <p class="height-50">
                                    <button nz-button [nzType]="'primary'" (click)="addHandler('add')">
                                        <i class="anticon anticon-plus"></i>
                                        <span>添加角色成员</span>
                                    </button>
                                </p>

                            </div>

                        </div>
                    </div>-->
                </div>
                <div *ngIf="!isrootChild">
                    <div  nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
                            <h3 style="font-weight:bold;margin-bottom: 15px;">请选择一个角色</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div *ngIf="tabId === 'funcper'">
                <div>
                    <div style="margin-bottom: 18px;border-bottom: 1px solid gainsboro;height: 32px;">
                        <span>角色 [ {{roleCode}}：{{roleName}}] 的功能权限</span>
                    </div>
                    <div class="ui-g">
                        <p-card  class="ui-g-4"  [style]="{width: '100%',border:'0px'}">
                            <div>
                                <nz-input  id="searchaVals"  [nzType]="'search'"  (keyup)="searchaValue()"  [nzPlaceHolder]="'请输入过滤信息'"  style="margin-bottom: 10px; width: 60%;" ></nz-input>
                                <span style="width: 7%; cursor: pointer; margin-right: 2%"  (click)="clickRoleFunc('reset')" class="anticon anticon-sync"></span>
                                <span style=" width: 6%; cursor: pointer; margin-right: 2%" class="anticon anticon-down-square-o"  (click)="clickRoleFunc('expand')"></span>
                                <span style=" width: 6%; cursor: pointer; margin-right: 2%" class="anticon anticon-up-square-o" (click)="clickRoleFunc('shrink')"></span>
                            </div>
                            <app-tree
                                [initDate] = "treeRoleFuncdata"
                                [noMenu] = "noMenu"
                                [inputSearch] = "inputSearch"
                                (develop)="UnRolefuncfold($event)"
                                [selectionType]='selectionType'
                                (Select)="TreeRoleFuncSelect($event)"
                            >
                            </app-tree>
                        </p-card>
                        <p-card class="ui-g-8"  *ngIf="ActiveShow" [style]="{border: '0px'}" >
                            <div class="ui-g-12">
                                <h3 style='width:100%;margin:1rem 0;font-weight:bold' >功能：{{funcInfo.funcName}}</h3>
                                <p>{{funcInfo.funcDesc}}</p>
                            </div>
                            <div class="ui-g-12">
                                <div class="ui-g-12">
                                    <div class="ui-g-12" style=" border-bottom: 1px solid #ccc">
                                        <h2><span class="anticon anticon-unlock"></span> &nbsp;&nbsp; 不验证权限的行为</h2>
                                    </div>
                                    <div  style="margin-left: 5%">
                                        <div class="ui-g-4"  *ngFor="let item of nocheckOptionsOne">
                                            <label style="cursor: pointer;"><input type="checkbox" name="sdasdad"
                                                          [(ngModel)]="item.checked"
                                                          [disabled]="true"
                                            >
                                                <nz-tooltip [nzTitle]="item.funcDesc" [nzPlacement]="'topLeft'">
                                                    <span nz-tooltip>{{item.label}}</span>
                                                </nz-tooltip>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <div class="ui-g-12" style="position: relative; border-bottom: 1px solid #ccc">
                                        <h2 style="display: inline-block"><span class="anticon anticon-lock"></span> &nbsp;&nbsp; 验证权限的行为</h2>
                                        <ng-container  *ngIf="isSaveEdit">
                                            <button style="top:-4px"  *appIf="appcofList.funcObject.role.editBehavior" nz-button type="reset" (click)="edit()" [nzSize]="'large'" class="mx-sm">修改</button>
                                        </ng-container>
                                        <ng-container *ngIf="!isSaveEdit">
                                            <button style="margin-left: 8px; top:-4px;margin-right: 8px;" *appIf="appcofList.funcObject.role.editBehavior"  nz-button type="submit" (click)="RoleFuncsave()"  [nzType]="'primary'"  [nzSize]="'large'">保存</button>
                                        </ng-container>
                                        <ng-container  *ngIf="!isSaveEdit">
                                            <button style="margin-left: 8px; top:-4px; margin-right: 8px;"  *appIf="appcofList.funcObject.role.editBehavior"  nz-button type="submit" (click)="roleFunccancel()"  [nzType]="'large'"  [nzSize]="'large'">取消</button>
                                        </ng-container>

                                    </div>
                                    <div class="ui-g-12" style="margin-left: 5%">
                                        <label style="width:100%; margin-left: 8px; margin-top:1rem;" nz-checkbox [(ngModel)]="checked" [nzDisabled]="isDisabledButton" (ngModelChange)="allSelect($event)">
                                            <span (click)="RoleFuncreset(checkOptionsOne)"> 操作行为</span>
                                        </label>
                                       <!-- <nz-checkbox-group class="checkboxId"
                                                           [(ngModel)]="checkOptionsOne"
                                                           (ngModelChange)="changes(checkOptionsOne)"
                                                           [nzDisabled]="isDisabledButton"
                                                           (click)="reset(checkOptionsOne)">
                                        </nz-checkbox-group>-->
                                        <div class="ui-g-4" *ngFor="let item of checkOptionsOne">
                                            <label style="cursor: pointer;"><input type="checkbox" name="sdasdad"
                                                          [(ngModel)]="item.checked"
                                                          [disabled]="isDisabledButton"
                                                          (ngModelChange)="changes(checkOptionsOne)"
                                                          (click)="RoleFuncreset(checkOptionsOne)"
                                            >
                                                <nz-tooltip [nzTitle]="item.funcDesc" [nzPlacement]="'topLeft'">
                                                    <span nz-tooltip>{{item.label}}</span>
                                                </nz-tooltip>
                                            </label>
                                        </div>
                                    </div>
                                    <!--<div style="margin-top:15px;">
                                        <h2  style="border-bottom: 1px solid #ccc"><span class="anticon anticon-edit"></span> &nbsp;&nbsp; 角色拥有的行为权限:</h2>
                                        <li class="ui-g-4" *ngFor="let option of roleTxt;let n=index" >
                                            {{roleTxt[n]}}
                                        </li>
                                    </div>-->
                                    <!--<div class="ui-g-6"> {{roleTxt}}</div>-->
                                </div>
                            </div>
                        </p-card>
                    </div>
                </div>
                <div *ngIf="!isrootChild">
                    <div  nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
                            <h3 style="font-weight:bold;margin-bottom: 15px;">请选择一个角色</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div *ngIf="tabId === 'entity'">
                <div  nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
                    <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
                        <h3 style="font-weight:bold;margin-bottom: 15px;">暂不开放此功能</h3>
                    </div>
                </div>
            </div>
            <div *ngIf="tabId === 'field'">
                <div  nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
                    <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
                        <h3 style="font-weight:bold;margin-bottom: 15px;">暂不开放此功能</h3>
                    </div>
                </div>
            </div>
            <div *ngIf="tabId === 'datarang'">
                <div  nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
                    <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
                        <h3 style="font-weight:bold;margin-bottom: 15px;">暂不开放此功能</h3>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
</div>

<nz-modal [nzVisible]="roleGroupVisible"  [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="modelTitle"  [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="roleGroupVisible=false" [nzFooter]="modalFooter">
    <ng-template #modalContent>
        <form novalidate *ngIf="!ifshow"  (ngSubmit)="save()"  #f="ngForm" >
            <!-- 新增角色-->
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24" *ngIf="saveType ==='addRole' || saveType ==='editRole'">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">角色名称</label><span [ngClass]="{'fromErrors':roleName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.roleName" name="roleName" #roleName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'角色名称'" nzId="roleName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="roleName.errors?.required && roleName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色名称
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>角色代码</label><span [ngClass]="{'fromErrors':roleCode.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.roleCode" required name="roleCode" #roleCode="ngModel"
                                      (nzBlur)="roleCodeexit(roleAdd.roleCode)"
                                      [nzSize]="'large'" [nzPlaceHolder]="'角色代码'" nzId="roleCode"
                            ></nz-input>
                            <nz-alert *ngIf='isSlash' nzBanner nzMessage="已存在相同的角色代码，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="roleCode.errors?.required && roleCode.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色代码
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否启用</label><span [ngClass]="{'fromErrors':f.controls.enabled?.errors}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="roleAdd.enabled" nzAllowClear required name="enabled" [nzSize]="'large'" [nzPlaceHolder]="'是否启用'" nzId="enAbled">
                                <nz-option  *ngFor="let i of enAbled; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="f.controls.enabled?.errors && f.controls.enabled.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择是否启用
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>角色分组</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.roleGroup" name="roleGroup" #roleGroup="ngModel" disabled  required [nzSize]="'large'" [nzPlaceHolder]="'默认角色分组'" nzId="roleGroup"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24" *ngIf="saveType ==='addroleGroup' || saveType === 'editroleGroup' ">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">角色组名称</label><span [ngClass]="{'fromErrors':roleName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.itemName" name="itemName" #roleName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'角色组名称'" nzId="itemName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="roleName.errors?.required && roleName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色组名称
                    </div>
                </div>
                <!--<div nz-col [nzSpan]="24" class="mb-md" *ngIf="modelTitle === '新增角色组'">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">字典项</label><span [ngClass]="{'fromErrors':itemValue.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.itemValue" name="itemValue" #itemValue="ngModel" (nzBlur)="empCodeexit(roleAdd.itemValue)"  required [nzSize]="'large'" [nzPlaceHolder]="'字典项'" nzId="itemValue"></nz-input>
                            <nz-alert *ngIf='isSlash' nzBanner nzMessage="已存在相同的字典项，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="itemValue.errors?.required && itemValue.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入字典项
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="modelTitle === '新增角色组'">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">实际值</label><span [ngClass]="{'fromErrors':sendValue.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.sendValue" name="sendValue" #sendValue="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'实际值'" nzId="sendValue"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="sendValue.errors?.required && sendValue.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入角色组名称
                    </div>
                </div>-->
                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="saveType ==='addroleGroup' || saveType === 'editroleGroup' ">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>角色组描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="roleAdd.itemDesc" nzAutosize=true nzType="textarea" name="itemDesc" [nzSize]="'large'" [nzPlaceHolder]="'角色组描述'"
                                      nzId="itemDesc"></nz-input>
                        </div>
                    </div>
                </div>

            </div>

            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="roleGroupVisible=false">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>

    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>
